<template>
  <div class="attendance-calendar-example">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>考勤日历示例</span>
          <div class="header-controls">
            <el-button @click="previousMonth" :disabled="isCurrentMonth">上一月</el-button>
            <el-button @click="goToCurrentMonth">本月</el-button>
            <el-button @click="nextMonth">下一月</el-button>
          </div>
        </div>
      </template>
      
      <div class="calendar-container">
        <div class="calendar-header">
          <h3>{{ currentMonthDisplay }}</h3>
        </div>
        
        <div class="calendar-grid">
          <!-- 星期标题 -->
          <div class="week-header">
            <div class="day-header" v-for="day in weekDays" :key="day">{{ day }}</div>
          </div>
          
          <!-- 日历主体 -->
          <div class="calendar-body">
            <div 
              v-for="day in calendarDays" 
              :key="day.date"
              class="calendar-day"
              :class="{
                'rest-day': day.restDay,
                'today': day.isToday,
                'empty': !day.date
              }"
            >
              <div v-if="day.date" class="day-content">
                <div class="day-number">{{ formatDayNumber(day.date) }}</div>
                <div class="day-status">
                  <div class="main-tag" :class="getDisplayTypeClass(day.displayType)">
                    {{ day.mainTag }}
                  </div>
                  <div v-if="day.subTags && day.subTags.length > 0" class="sub-tags">
                    <span 
                      v-for="tag in day.subTags" 
                      :key="tag" 
                      class="sub-tag"
                    >
                      {{ tag }}
                    </span>
                  </div>
                </div>
                <div v-if="day.displayText" class="display-text">
                  {{ day.displayText }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { AttendanceDetailApi } from '@/api/oa/attendancedetail'

defineOptions({ name: 'AttendanceCalendarExample' })

// 响应式数据
const currentMonthDate = ref(new Date())
const calendarData = ref<any>(null)
const loading = ref(false)

// 计算属性
const currentMonthDisplay = computed(() => {
  return `${currentMonthDate.value.getFullYear()}年${currentMonthDate.value.getMonth() + 1}月`
})

const currentMonthParam = computed(() => {
  const year = currentMonthDate.value.getFullYear()
  const month = String(currentMonthDate.value.getMonth() + 1).padStart(2, '0')
  return `${year}-${month}`
})

const isCurrentMonth = computed(() => {
  const now = new Date()
  return currentMonthDate.value.getFullYear() === now.getFullYear() && 
         currentMonthDate.value.getMonth() === now.getMonth()
})

const weekDays = ['日', '一', '二', '三', '四', '五', '六']

const calendarDays = computed(() => {
  if (!calendarData.value?.days) return []
  
  const days = calendarData.value.days
  const firstDay = new Date(days[0]?.date || currentMonthDate.value)
  const startOfMonth = new Date(firstDay.getFullYear(), firstDay.getMonth(), 1)
  const dayOfWeek = startOfMonth.getDay()
  
  // 填充月初空白天数
  const emptyDays = Array(dayOfWeek).fill({ date: null })
  
  return [...emptyDays, ...days]
})

// 方法
const loadCalendarData = async () => {
  loading.value = true
  try {
    // 这里使用当前登录用户ID，实际使用时可能需要从props传入
    const userId = 1 // 示例用户ID
    const response = await AttendanceDetailApi.getAttendanceCalendar({ userId, month: currentMonthParam.value })
    calendarData.value = response.data
  } catch (error) {
    console.error('加载考勤日历失败:', error)
  } finally {
    loading.value = false
  }
}

const previousMonth = () => {
  currentMonthDate.value = new Date(currentMonthDate.value.getFullYear(), currentMonthDate.value.getMonth() - 1, 1)
  loadCalendarData()
}

const nextMonth = () => {
  currentMonthDate.value = new Date(currentMonthDate.value.getFullYear(), currentMonthDate.value.getMonth() + 1, 1)
  loadCalendarData()
}

const goToCurrentMonth = () => {
  currentMonthDate.value = new Date()
  loadCalendarData()
}

const formatDayNumber = (dateStr: string) => {
  return new Date(dateStr).getDate()
}

const getDisplayTypeClass = (displayType: string) => {
  const classMap: Record<string, string> = {
    'normal': 'type-normal',
    'leave': 'type-leave',
    'overtime': 'type-overtime',
    'business_trip': 'type-business-trip',
    'card_replacement': 'type-card-replacement',
    'absent': 'type-absent',
    'rest': 'type-rest'
  }
  return classMap[displayType] || 'type-default'
}

// 生命周期
onMounted(() => {
  loadCalendarData()
})
</script>

<style scoped>
.attendance-calendar-example {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-controls {
  display: flex;
  gap: 10px;
}

.calendar-container {
  margin-top: 20px;
}

.calendar-header {
  text-align: center;
  margin-bottom: 20px;
}

.calendar-grid {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
}

.week-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
}

.day-header {
  padding: 12px;
  text-align: center;
  font-weight: bold;
  color: #606266;
}

.calendar-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendar-day {
  min-height: 120px;
  border-right: 1px solid #e4e7ed;
  border-bottom: 1px solid #e4e7ed;
  padding: 8px;
  position: relative;
}

.calendar-day:nth-child(7n) {
  border-right: none;
}

.calendar-day.empty {
  background-color: #fafafa;
}

.calendar-day.rest-day {
  background-color: #f0f9ff;
}

.calendar-day.today {
  background-color: #e8f5e8;
  border: 2px solid #67c23a;
}

.day-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.day-number {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 4px;
}

.day-status {
  margin-bottom: 4px;
}

.main-tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  color: white;
  margin-bottom: 2px;
}

.type-normal {
  background-color: #67c23a;
}

.type-leave {
  background-color: #e6a23c;
}

.type-overtime {
  background-color: #409eff;
}

.type-business-trip {
  background-color: #909399;
}

.type-card-replacement {
  background-color: #f56c6c;
}

.type-absent {
  background-color: #f56c6c;
}

.type-rest {
  background-color: #909399;
}

.type-default {
  background-color: #909399;
}

.sub-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.sub-tag {
  display: inline-block;
  padding: 1px 4px;
  border-radius: 2px;
  font-size: 10px;
  background-color: #f0f0f0;
  color: #606266;
}

.display-text {
  font-size: 10px;
  color: #606266;
  line-height: 1.2;
  word-break: break-all;
  flex: 1;
  overflow: hidden;
}
</style> 